Lightning Apps and Components

The Lightning Design System is ready to use in your Lightning apps and components.

The Lightning Design System CSS is now automatically included for Lightning Components running in the Lightning Experience and Salesforce S1 mobile application (via app.css). It is no longer necessary to add a static resource for Lightning Components running within these environments.

There are still cases where you will need to use a static resource with Lightning Components. Current examples are — when building a standalone Lightning Application (my.app), or in a component that will be used via Lightning Out. In this case, you'll need to create a customized scoped CSS file to use.

We have prepared a self-guided workshop to guide you through installation, usage, and examples. It includes details on how to use the Design System SVG spritemap icons in Lightning components.

Please note the following when using the Lightning Design System with Lightning components:

  • When using the component sample code from the Trailhead module, be sure to replace all static resource paths with the Lightning resource URL syntax, as summarized in the FAQ
  • For details on how to use the Design System SVG spritemap icons in Lightning components, please review the tutorial which covers this in detail. Also note that when using SVG spritemap image icons with MSIE you will need to use a small script called svg4everybody

You can also find a range of open-sourced sample components in the ForceDotComLabs/sldsx project on github.

Finally, we’d love to hear your feedback. Share your thoughts about any aspect of this tutorial or the Lightning Design System in general via our GitHub issues.